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Abstract 

Summary: We present two web-based connponents for the display of 
Protein-Protein Interaction networks using different self-organizing layout 
nnethods: force-directed and circular. These connponents confornn to the BioJS 
standard and can be rendered in an HTML5-connpliant browser without the 
need for third-party plugins. We provide exannples of interaction networks and 
how the connponents can be used to visualize thenn, and refer to a nnore 
connplex tool that uses these connponents. 
Availability: http://github.conn/biojs/biojs; 
http://dx.doi.org/10.5281/zenodo.7753 
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Introduction 

"Proteins are the building blocks of life '\ This is probably the most 
commonly used analogy in the molecular biology world. Despite 
the danger of falling into a cliche, we will elaborate on this. A brick 
is not a building, not a room, not even a wall; in the same way, 
proteins rarely perform functions in isolation, it is their interactions 
which form the complex networks that are responsible for almost 
all cellular processes. 

The number of reported Protein-Protein Interaction (PPI) networks 
has grown considerably, partly due to advances in high-throughput 
experimentation and partly due to the new predictions that result 
from these empirical data. 

Various strategies have been used to store this data for ease of 
retrieval and analysis of PPI networks ^ For instance, IntAct- is an 
open source repository for molecular interactions reported in the 
literature or directly deposited by the user; the STRING database' 
includes physical and functional associations derived from genomic 
context, high-throughput experiments, coexpression analysis or the 
literature. Other PPI sources are described in:'^ '^. 

The volume of data now contained in PPI repositories has made 
the analysis and understanding thereof a challenge that can be 
enriched by the use of visualization techniques. PPI networks have 
been found to follow a behaviour that in graph theory is referred to 
as scale-free, which uses a few highly connected nodes and many 
nodes with few interactors. This feature allows a user to predefine 
visualization strategies to highlight certain characteristics. This 
approach has been used for multiple tools, some are stand-alone 
applications (e.g. Cytoscape"^, Java applications that are web avail- 
able via Applets (e.g.VisANT^O. or those developed on Flash (e.g. 
STITCH^). Details about other tools, comparisons between them, 
highlighted features and supported layouts can be found in any of 
the following reviews: 

The web technologies covered under the umbrella term of HTML5 
allow the display of some of those layouts natively on the web in 
a fully interactive way. We have used these technologies to imple- 
ment two of the most popular layouts for PPI network visualization: 
Force-directed and Circle. 

The components were developed following the BioJS standard 
and are freely available at its registry: http://goo.gl/064ChR, http:// 
goo.gl/RGlRLB. 

BioJS components 

We have implemented the standards defined by BioJS in the devel- 
opment of two components for the visualization of PPI networks. 
The use of BioJS gives visibility to the components so that they 
can be discovered by third parties interested in the visualization of 
protein networks on the web. 

We consider the publication via the BioJS registry beneficial for 
both the potential user and the developer of the component. The 
user of the component will save time by adopting a component 
instead of developing it from scratch. The particular needs of the user 



may require the implementation of specifics which could contribute 
to the further development of the component in a communal effort. 
All this is in the nature of open source projects, but without visibil- 
ity it would hardly ever happen. 

Both PPI network visualizer components are implemented as wrap- 
pers of layouts included in the Data Driven Document (D3) library 
a popular JavaScript library for the processing and visualization of 
data. Besides making these layouts follow the BioJS structure, most 
of the effort has been directed at providing methods that are closer 
to the PPI vocabulary (e.g. addProtein(),addInteraction()). Both 
components follow the same API (Application Program Interface) 
and therefore any script developed to display on one layout can be 
used on the other. 

Force-directed layout 

The D3 library provides an implementation of the Barnes-Hut 
simulation in order to efficiently create a self-organized network. 
This algorithm performs better than others because it aggregates the 
forces of close nodes, to avoid individual calculation on the forces 
whenever possible. Its performance facilitates a smoother transition 
between the execution steps of the algorithm, creating an appealing 
visual effect of live self organization. We have used this generic net- 
work layout available in D3 to provide a set of methods and events 
to represent PPI networks. 

Figure 1 displays a subset of proteins from the organism Mycobac- 
terium tuberculosis, that interact with furB. It includes all the inter- 
actions between these proteins with each protein color coded by 
reported functional class. FurB is a zinc uptake regulation protein 
involved in repression of many genes involved in zinc homeostasis^^. 

Color By: 

regulatory proteins H 
intermediary metabolism and respiration ^ 
information pathways | 




Figure ^ . Mycobacterium tuberculosis proteins that interact with 
furB and the interactions between them (using force-directed 
layout). 
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FurB interacts with a number of different genes, with related func- 
tions, including the transcriptional regulator FurA, which represses 
transcription of katG, the catalase-peroxidase gene as well as itself, 
and the HTH-type transcriptional repressor SmtB, also involved in 
zinc homeostasis. FurB also interacts with the cAMP receptor pro- 
tein, a global transcriptional regulator, although no link to metal 
ions has been annotated for this protein, a disruption in the protein 
results in slow growth. Additional interactions for FurB are with 
enzymes involved in amino acid biosynthesis (dapB, acn) or purine 
metabolism (purE, purK). One thing in common between these pro- 
teins appears to be their relation to growth. 

BioJS provides instructions regarding the installation of each com- 
ponent including their required dependencies, style files and snip- 
pets of JavaScript code to be inserted into the web page where the 
component will be embedded. For example, installation instructions 
for the force-directed layout can be found on the Installation tab of 
the component page in the BioJS Registry (http://goo.gl/064ChR). 

The full script used to generate Figure 1 is available as a jsFiddle 
(a web resource for the online edition and display of snippets of 
JavaScript code) at this URL: http://jsfiddle.net/Bvh6k/l/. Below is 
a description of the main components of that code: 

A developer should start by creating an instance of the component: 

var instance = new Bio j s . InteractionsD3 ( { 
target: "example" 

}); 

All the proteins in the graphic should then be added. The follow- 
ing example shows how to add the protein with UniProt id 005839 
(http://www.uniprot.org/uniprot/O05839). Note how the organism 
to which it belongs is included, along with which feature should be 
used for the label: 

instance . addProtein ( { 

id: 'O05839', organism: "MTB", 
gene_name : "f urB", 
typeLegend : "gene_name" } ) ; 

In the same way, the interactions should be added to the graphic, 
ensuring that the interactions are between proteins that have already 
been added. For instance: 

instance . addlnteraction ( 
"005839", "P0A582", 
{id: "P0A582_P0A582"} ) ; 

Once all the proteins and interactions have been declared, the 
graphic can be restarted so it reflects the additions: 

instance . restart (); 



The example also includes some instructions for coloring and for- 
mat. For more details on those methods see the component on the 
BioJS registry: http://goo.gl/064ChR. 

Circle layout 

As mentioned previously, both components have the same API with 
the exception of methods that help to control the force layout of the 
first component which do not apply to the Circle layout. Thanks to 
this, the script to generate a PPI visualization of the same network 
is very similar in both. In order to demonstrate this we have created 
a second script that visualizes the same network as in Figure 1 but 
now on a Circle layout (Figure 2). The only difference between 
both scripts is the declaration of the object. Instead of using the 
oh]QCi Bio js.InteractionsD 3 it uses Biojs.InteractionsBundleD3 and 
rest of the script is exactly the same. This can be seen in the fiddle: 
http://jsfiddle.net/J4CE7/l/. 

Color By: 

regulatory proteins | 
intermediary metabolism and respiration \ 
information pathways H 




Figure 2. Mycobacterium tuberculosis proteins that interact with 
furB and the interactions between them (using Circle layout). 

Use Case: PINV 

We have used these two layouts and a few other BioJS components 
to create a web native application that allows the querying and vis- 
ual exploration of PPI networks. It is called PINV: Protein Interac- 
tions Network Visualizer, and is freely available at http://biosual. 
cbio .uct. ac . za/pinv. html. 

With PINV, we are looking to offer an alternative for the visualiza- 
tion of PPI data that takes advantage of the web to provide col- 
laborative tools. 

Currently PINV can display the PPI networks in three ways: the two 
layouts discussed above and through a table of the raw data. The 
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addition of other layouts in the future is not comphcated, thanks to 
the standards defined by BioJS and the adoption of the same API. 

The same example used for Figure 1 and Figure 2 is available on 
PINV under this link: http://goo.gl/r4XpOS. 

Conclusions 

One of the limitations of current web-based methods for PPI visu- 
alization is that they require third-party browser plugins. We dem- 
onstrate that the HTML5 standard provides enough functionality 
to render these networks in compliant browsers, without the need 
to install additional browser components. Adoption of the BioJS 
standard has the advantage of greater exposure to potential users, 
and an established set of features such as testing and documenta- 
tion. Finally, the components abstract much of the details of ren- 
dering complex scalable vector graphics (SVG) behind an intuitive 
API, allowing users to focus on building richer applications. 

Software availability 

Zenodo: BioJS components for the display of Protein-Protein Inter- 
actions, doi: 10.528 l/zenodo.775311 

GitHub: BioJs, http://github.com/biojs/biojs. 
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The two JavaScript components presented in this article facilitate the visualization of interaction networks 
in HTML5-enabled web browsers without requiring any third-party plugins like Flash. As they follow the 
BioJS standard, they are listed in the BioJS registry and should be interoperable with other components. 

The manuscript is comprehensibly written and, despite the length limitations, successfully introduces both 
tools and their basic usage. The availability of the source code and particularly the jsFiddle live demo 
setup enable the interested reader to explore the software without complicated installation procedures. 

In the following, I will list a few comments that might help to assure that the tools unlock their full potential. 
Note that while there is an overlap to the review by Laurent Gatto, I will repeat certain aspects for the sake 
of completeness. 

Interoperability with other BioJS components / PINV: 

The ability to show additional information about protein interactors (e.g., database identifiers, 
cross-references) and their interactions (e.g. links to source databases and publications, confidence 
scores) is what distinguishes a truly interactive network display from a nice visualization. In contrast to the 
two basic examples currently provided, PINV nicely demonstrates that this can be accomplished. Given 
that BioJS is essentially about modularity and re-usability of code, it would be great if the authors could 
provide more detailed examples that illustrate how their layout components can be combined with other 
BioJS components, e.g., to visualize additional information in popups. If manuscript space permits, 
additional commented source code files or a jsFiddle setup would be great and would further ease the 
application of the tools. 

M. tuberculosis example: 

As part of the BioJS collection, the manuscript generally seems to be written for computer scientists / 
developers rather than biologists. As such, the paragraph describing the M. tuberculosis interaction 
network example is too extensive and does not fit the focus of the remaining article. This example could 
be shortened and moved into the corresponding figure legends, making room for the aforementioned, 
more thorough description of other parts. 

Cytoscape.js: 

While the authors mention similar software like Cytoscape and VisANT, the HTML5 library Cytoscape.js ( 
http://cytoscape.github.io/cytoscape.js/) and its predecessor Cytoscape Web ( 
http://cytoscapeweb.cytoscape.org/) are omitted, although they are likely the closest competitors. 
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Source code examples: 

From the manuscript or the source code examples it is not obvious why the UniProtKB accession 
numbers and the organism information is provided, as neither is used or shown in the examples. It should 
be clarified, if tools require this information or if this might be used for connecting with other BioJS 
components. 

Title: 

Looking only at the title and the abstract, it appears that "PPI layouts" is the name of the BioJS component 
that is described in the article. As this is not the case and the name "PPI layouts" is never used again, it 
could be removed from the title to prevent confusion. 

I have read this submission. I believe that I have an appropriate level of expertise to confirm that 
it is of an acceptable scientific standard. 

Competing Interests: No competing interests were disclosed. 




Laurent Gatto 

Cambridge Centre for Proteomics, University of Cambridge, Cambridge, UK 



Approved: 10 March 2014 

Referee Report: 10 March 2014 
doi:1 0.5256/f 1 000research.3677.r3688 

The manuscript PPI layouts: BioJS components for the display of Protein-Protein Interactions by Salazar 
and colleagues briefly illustrate the BioJS component for the interactive html5-based visualisation of PPI. 

The manuscript is easy to read and provides a quick, yet useful introduction to the BioJS PPI visualisation 
tools. The component described in the manuscript and the BioJS project in general are a welcome 
initiative. The PPI interaction tools was straightforward to assess thanks to support for the online edition, 
simple implementation, and its distribution to the bioinformatics community under an open access license. 

Below, I have a few suggestions: 

BioJS component section 

In the first paragraph the sentence "The use of BioJS gives visibility to the components so that they can 
be [discovered] by third parties...". Do the authors mean that the individual component will benefit from 
the BioJS visibility, or is there a specific discovery mechanism? 

M. tuberculosis example network 

While I appreciate that it is not easy to find the right balance between a simple yet biologically relevant 
illustration of the tool, I believe that the paragraph that describes the interaction network could be 
improved. For example, some proteins are named and described while others are not. 

While reading the description of the code generating the network in Figure 1 and 2 and using the jsFiddle 
instance, several questions arose that could be addressed in the manuscript. 

• the authors provide a UniProt identifier. Could the nodes be links to the relevant protein UniProt 

pages? Could other identifiers be used and how would the links to other arbitrary pages be 

defined? 
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• What is the use of the species name in the protein instance definition? Is it mandatory? Are there 
examples of PPIs with multiple species? 

• Graph annotation. Is it possible to use different symbols for the nodes? How to annotate the edges 
(through colours and/or labels)? Any comments on the use of node colours as a means to illustrate 
additional meta-data: are specific colour palettes (for continuous data for example) or transparency 
available? 

PINV 

The PINV application is a step further than the examples described in the manuscript, that possibly 
deserves a bit more description in the text and could guide the reader on how to build up from simple 
cases to more complex applications. 



Before Figure 2 

Instead of using the object Biojs.lnterationsDS it uses Biojs.lnteractionsBundleDS and [the] rest of the 
script is exactly the same. 

Compliant browsers 

The authors repeat the requirement for compliant browsers. I was wondering if examples of compliant 
browsers could be provided to guide users new to html5 and issues related to browser compatibility. 



I have read this submission. I believe that I have an appropriate level of expertise to confirm that 
it is of an acceptable scientific standard. 

Competing Interests: No competing interests were disclosed. 
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